window.addEventListener('load', function () {
    //获取元素
    //去登录
    let goLogin = document.querySelector('.goLogin')
    //去注册goLogin
    let goRegister = document.querySelector('.goRegister')
    //注册面板
    let register = document.querySelector('.register')
    //登陆面板
    let login = document.querySelector('.login')
    //获取注册面板中的用户名和密码
    let reusername = document.querySelector('.register [name=username]')
    let repassword = document.querySelector('.register [name=password]')
    //获取登录面板中的用户名和密码
    let lusername = document.querySelector('.login [name=username]')
    let lpassword = document.querySelector('.login [name=password]')

    //实现登录和注册面板的显示和隐藏
    //在注册页面，去登陆
    goLogin.addEventListener('click', function () {
        login.style.display = 'block'
        register.style.display = 'none'
    })
    //在登录页面，去注册
    goRegister.addEventListener('click', function () {
        login.style.display = 'none'
        register.style.display = 'block'
    })

    // 表单验证：校验用户名和密码
    function test() {
        return {
            fields: {
                username: { // 这里username是 input 的name属性值，表示对这个输入框进行验证
                    validators: { // 添加真正的校验规则
                        notEmpty: {   //不能为空
                            message: '用户名不能为空.'// 如果不满足校验规则，则给出这句提示
                        },
                        stringLength: {   //检测长度
                            min: 2, // 最少2位
                            max: 15, // 最多15位
                            message: '用户名需要2~15个字符'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {   //检测长度
                            min: 6,
                            max: 15,
                            message: '密码需要6~15个字符'
                        }
                    }
                }
            }
        }
    }
    //实现注册--插件调用表单验证（验证通过后才发请求）
    $('.register form').bootstrapValidator(test()).on('success.form.bv', function (e) {
        e.preventDefault();
        //获取表单元素
        username = reusername.value
        password = repassword.value
        //发起ajax请求
        axios({
            method: 'post',
            url: '/api/register',
            data: { username, password }
        }).then(res => {
            // console.log(res);
            if (res.data.code == 0) {
                //使用toastr成功提示
                toastr.success(res.data.message)
                // 注册后显示登录面板
                goLogin.click()
                // 清空注册面板中元素的值
                reusername.value = repassword.value = ''
            } else {
                //使用toastr错误提示
                toastr.warning(res.data.message)
            }
        })
    })

    //实现登录功能--插件调用表单验证（验证通过后才发请求）
    $('.login form').bootstrapValidator(test()).on('success.form.bv', function (e) {
        e.preventDefault();
        //获取表单元素
        username = lusername.value
        password = lpassword.value
        //发起ajax请求
        axios({
            method: 'post',
            url: '/api/login',
            data: { username, password }
        }).then(res => {
            console.log(res);
            if (res.data.code == 0) {
                //使用toastr成功提示
                toastr.success(res.data.message)
                //将后台响应的token值存储在本地
                localStorage.setItem('kshtoken', res.data.token)
                //跳转到首页
                location.href = './index.html'
            } else {
                //使用toastr错误提示
                toastr.error(res.data.message)
            }
        })
    })
})